<template>
  <div class="order-warp">

        <div class="search">
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        @submit.native.prevent
      >
        <el-form-item label="用户账号">
          <el-input
            v-model="queryParams.username"
            clearable
            placeholder="输入用户账号"
            @keyup.enter.native="handleQuery"
          ></el-input>
        </el-form-item>
        <el-form-item label="配送车辆">
          <el-input
            v-model="queryParams.carNumber"
            clearable
            placeholder="输入车牌号"
            @keyup.enter.native="handleQuery"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select
            v-model="queryParams.state"
            clearable
            placeholder="选择状态"
            @change="handleQuery"
          >
            <el-option
              v-for="item in stateList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search" plain @click="handleQuery"
            >搜索</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <el-table  :data="orderList" stripe style="width: 100%">
      <el-table-column prop="id" label="订单号" width="80" />

      <el-table-column label="订单状态" width="80">
        <template #default="scope">
          <el-tag v-if="scope.row.state == 1">{{ scope.row.stateName }}</el-tag>
          <el-tag v-if="scope.row.state == 2" type="info">{{
            scope.row.stateName
          }}</el-tag>
          <el-tag v-if="scope.row.state == 3" type="warning">{{
            scope.row.stateName
          }}</el-tag>
          <el-tag v-if="scope.row.state == 4" type="danger">{{
            scope.row.stateName
          }}</el-tag>
          <el-tag v-if="scope.row.state == 5" type="success">{{
            scope.row.stateName
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="startPlace" label="起点" width="120" />
      <el-table-column prop="endPlace" label="终点" width="120" />
      <el-table-column prop="carTypeName" label="车辆类型" width="120" />
      <el-table-column prop="distance" label="距离(KM)" width="100" />
      <el-table-column prop="moveTime" label="预约搬家时间" width="160" />
      <el-table-column
        prop="extInfo"
        label="额外情况"
        show-overflow-tooltip
        width="180"
      />
      <el-table-column
        prop="remark"
        label="备注"
        show-overflow-tooltip
        width="180"
      />
      <el-table-column prop="price" label="预估价格(元)" width="110" />
      <el-table-column prop="realPrice" label="实际价格(元)" width="110" />
      <el-table-column prop="username" label="用户" width="80" />
      <el-table-column prop="phone" label="手机号" width="120" />
      <el-table-column prop="createTime" label="下单时间" width="160" />
      <el-table-column prop="receiveTime" label="接单时间" width="160" />
      <el-table-column prop="completeTime" label="配送完成时间" width="160" />
      <el-table-column prop="payTime" label="支付时间" width="160" />
      <el-table-column prop="carNumber" label="配送车辆" width="100" />
      <el-table-column fixed="right" label="操作" width="80">
        <template #default="scope">
          <el-button
            @click="toReceiveOrder(scope.row.id)"
            type="text"
            size="small"
            v-if="scope.row.state == 1"
            >进行接单</el-button
          >
          <el-button
            @click="toCompleteOrder(scope.row.id)"
            type="text"
            size="small"
            v-if="scope.row.state == 3"
            >配送完成</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="footer">
      <el-pagination
        background
        layout="total, prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>

     <el-dialog v-model="receiveOrderDialog" title="进行接单" width="500px">
    <el-form
      :rules="receiveRules"
      style="margin-top: 20px"
      ref="receiveFormEl"
      label-width="80px"
      :model="{}"
    >
      <el-form-item label="车辆" prop="carId">
        <el-select v-model="carId" style="width: 100%" placeholder="选择车辆">
          <el-option
            v-for="item in carList"
            :label="item.carNumber"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="receiveOrderDialog = false">取消</el-button>
        <el-button type="primary" @click="doReceiveOrder">确定</el-button>
      </span>
    </template>
  </el-dialog>

  <el-dialog v-model="completeOrderDialog" title="配送完成" width="500px">
    <el-form
      :rules="completeRules"
      style="margin-top: 20px"
      ref="completeFormEl"
      label-width="100px"
      :model="{}"
    >
      <el-alert
        style="margin: 20px 0; text-align: center"
        title="提示:最终价格需与用户共同协商确定  !"
        type="warning"
      />
      <el-form-item label="实际价格(元)" prop="realPrice">
        <el-input-number
          style="width: 100%"
          placeholder="输入实际价格"
          :controls="false"
          v-model="realPrice"
          :min="0"
          :max="1000000"
          :precision="2"
        ></el-input-number>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="completeOrderDialog = false">取消</el-button>
        <el-button type="primary" @click="doCompleteOrder">确定</el-button>
      </span>
    </template>
  </el-dialog>
  </div>

 
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";
import {
  getOrderList,
  getCarList,
  receiveOrder,
  completeOrder,
} from "../../api/order";
import { Search } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
const orderList = ref([]);

const queryParams = ref({
  state: null,
  username: null,
  carNumber: null,
  current: 1,
  size: 10,
});

const stateList = [
  {
    id: 1,
    name: "待接单",
  },
  {
    id: 2,
    name: "已取消",
  },
  {
    id: 3,
    name: "已接单",
  },
  {
    id: 4,
    name: "待支付",
  },
  {
    id: 5,
    name: "已完成",
  },
];

const total = ref(0);
const getList = () => {
  getOrderList(queryParams.value).then((res) => {
    orderList.value = res.data.records;
    total.value = res.data.total;
  });
};

const handleQuery = () => {
  queryParams.value.current = 1;
  getList();
};

const carList = ref([]);

const currentOrderId = ref(null);
const carId = ref(null);
const receiveOrderDialog = ref(false);

const validateCarId = (rule, value, callback) => {
  if (!carId.value) {
    callback(new Error("请选择车辆"));
  } else {
    callback();
  }
};

const receiveRules = reactive({
  carId: [{ validator: validateCarId, trigger: "change" }],
});

const toReceiveOrder = (orderId) => {
  console.log(11);
  currentOrderId.value = orderId;
  carId.value = null;
  getCarList().then((res) => {
    carList.value = res.data;
  });
  receiveOrderDialog.value = true;
};

const receiveFormEl = ref();

const doReceiveOrder = () => {
  receiveFormEl.value.validate((valid) => {
    if (valid) {
      receiveOrder(currentOrderId.value, carId.value).then((res) => {
        ElMessage.success("接单成功");
        getList();
        receiveOrderDialog.value = false;
      });
    } else {
      console.log("error submit!");
      return false;
    }
  });
};

const completeOrderDialog = ref(false);

const realPrice = ref(undefined);

const validateRealPrice = (rule, value, callback) => {
  if (!realPrice.value) {
    callback(new Error("请输入实际价格"));
  } else {
    callback();
  }
};

const completeRules = reactive({
  realPrice: [{ validator: validateRealPrice, trigger: "blur" }],
});

const toCompleteOrder = (orderId) => {
  currentOrderId.value = orderId;
  realPrice.value = undefined;
  completeOrderDialog.value = true;
};

const completeFormEl = ref();

const doCompleteOrder = () => {
  completeFormEl.value.validate((valid) => {
    if (valid) {
      completeOrder(currentOrderId.value, realPrice.value).then((res) => {
        ElMessage.success("配送成功");
        getList();
        completeOrderDialog.value = false;
      });
    } else {
      console.log("error submit!");
      return false;
    }
  });
};

onMounted(() => {
  getList();
});
</script>

<style scoped lang="less">
.order-warp {
  .footer {
    padding: 10px 0;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
